<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <input type="text" v-model="searchName">
    <ul>
      <li v-for='(item,index) in filterPerson' :key="item.id">
           {{index+1}}--{{item.name}}--{{item.age}}
      </li>
    </ul>
    <button @click='typeSort=1'>升序</button>
    <button @click='typeSort=2'>降序</button>
    <button @click='typeSort=0'>原顺序</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el:'#root',
      data:{
        
         searchName:'',
         typeSort:0,
         person:[
          {id:1,name:'iCon', age:12},
          {id:2,name:'Tom', age:17},
          {id:3,name:'Jacklove', age:18},
          {id:4,name:'Lwx', age:13},
          {id:5,name:'Doinb', age:20},
          {id:6,name:'Crisp', age:17},
          {id:7,name:'Light', age:10},
         ]
      },
      computed:{
        filterPerson(){
          const{searchName,person,typeSort}=this
          const arr=person.filter(p=>{
            return p.name.includes(searchName);
          })
          if(typeSort !== 0){
              arr.sort((item1,item2)=>{
                if(typeSort === 1){
                  return item1.age-item2.age
                }else{
                  return item2.age-item1.age
                }
              })
            }
          return arr
        }
      }
    })
  </script>
</body>
</html>